<script setup>
defineOptions({
  name: 'NotificationPage',
})
</script>
<template>
  <main>
    <div class="title">通知</div>
    <div class="anns">
      <el-scrollbar>
        <p v-for="item in 20" :key="item" class="scrollbar-demo-item">
          请接收您的第{{ item }}条学习通知
        </p>
      </el-scrollbar>
    </div>
    <p>暂无更多</p>
  </main>
</template>
<style scoped lang="less">
.title {
  position: fixed;
  top: 0;
  z-index: 1000;
  width: 100%;
  height: 80px;
  padding: 25px 80px 0 0;
  font-size: 25px;
  text-align: center;
  color: rgb(218, 213, 213);
  background-color: #101014;
}
.anns {
  margin-top: 80px;
  .scrollbar-demo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    height: 45px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    background: #34373c;
    color: #fff;
  }
}
p {
  margin: 20px auto;
  text-align: center;
  color: #b4bfd1;
}
</style>
